<template>
  <div style="border: 1px solid #ffffff ;background-color: #ffffff;width:100%;height:500px">

    <el-row>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基础信息" name="first">
          <el-form ref="form" :model="productInfo.zproductByProductId" label-width="80px" class="form_sty">
            <el-row>
              <el-col :span="8">
                <el-form-item  label="品牌:">
                  <el-input  v-model="productInfo.zproductByProductId.zproductbrandByPdId.pbName"  placeholder="优品创意公司第一次合作"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item  label="类型:" >
                  <el-input  v-model="productInfo.zproductByProductId.zproductcategoryByPcId.pcName"  placeholder="优品创意公司第一次合作"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="8">
                <el-form-item  label="产品名称:" prop="name">
                <el-input  v-model="productInfo.zproductByProductId.productName"  placeholder="优品创意公司第一次合作"></el-input>
              </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item  label="产品型号:" prop="name">
                  <el-input  v-model="productInfo.zproductByProductId.prModel"  placeholder="优品创意公司第一次合作"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="规格信息" name="second">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item  v-for="(pro,index) in productInfo.zsidesmodelmiddlesByPsId"  :key="index" :label="pro.zspecificationsvalueBySpecId.zspecificationsByOnsId.onsName+':'">
              <span>{{pro.zspecificationsvalueBySpecId.specVlaue}}</span>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="图片" name="third">
          <el-table
            ref="multipleTable"
            :data="productInfo.zproductimgsByPsId"
            tooltip-effect="dark"
            style="width: 100%;">
            <el-table-column  label="主图片" align="center"   width="120px">
              <template slot-scope="scope">
                <el-image
                  class="table-td-thumb"
                  :src="scope.row.imgsaSrc"
                  :preview-src-list="[scope.row.imgsaSrc]"
                ></el-image>
              </template>
            </el-table-column>
            <el-table-column   label="副图片" align="center"   width="120px">
              <template slot-scope="scope">
                <el-image
                  class="table-td-thumb"
                  :src="scope.row.imgsbSrc"
                  :preview-src-list="[scope.row.imgsbSrc]"
                ></el-image>
              </template>
            </el-table-column>
            <el-table-column  label="副图片"   align="center"   width="120px">
              <template slot-scope="scope">
                <el-image
                  class="table-td-thumb"
                  :src="scope.row.imgscSrc"
                  :preview-src-list="[scope.row.imgscSrc]"
                ></el-image>
              </template>
            </el-table-column>

          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-row>
  </div>
</template>

<script>
  export default {
	name: 'SaProductMainInfo',
    data(){
	  return{
	    productInfo:{},
      activeName: 'first'
    }
    },
    created:function(){
	  this.initData(this.$route.query.key);
    },
    methods:{
      handleClick(tab, event) {
        console.log(tab, event);
      },
      initData(id){
        this.$axios.get("http://localhost:8088/product_main",{params:{psId:id}}).then(v=>{
          this.productInfo=v.data;
        }).catch()
      }
    }
  }
</script>

<style scoped>
  .form_sty>>>input{
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: none;
  }
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }


</style>
